{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<style>
    .review {cursor: pointer;}
    .layui-btn-container {display: flex;}
    .layui-btn-container input {width: 150px;height: 32px;margin-right:10px;justify-content: flex-start;font-size: 12px;}
    .layui-btn-container .layui-form-label {font-size: 12px;font-weight: 300;}
</style>
{/block}
{block name="main"}
<div class="main">
    <table id="table" lay-filter="table"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container ">
        <button class="layui-btn layui-btn-sm" lay-event="delALl">删除选中</button>
        <button class="layui-btn layui-btn-sm" lay-event="addOne">新增</button>
        <div class="layui-inline">
            <label class="layui-form-label">高级搜索</label>
            <div class="layui-input-inline">
                <input type="text" name="search" autocomplete="off" class="layui-input" placeholder="查找标题,短标题等信息">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test6" name="date">
            </div>
        </div>
        <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table','jquery','laydate','miniTab'],function(){
        var table = layui.table,$ = layui.jquery,column_id = '{$Request.param.column_id}',laydate = layui.laydate,cols = [[
                    {type: 'checkbox'}
                    ,{field:'id', title:'ID'}
                    ,{field:'title', title:'标题'}
                    ,{field:'short_title', title:'短标题'}
                    ,{field:'keyword', title:'关键字'}
                    ,{field:'seo_title', title:'seo标题'}
                    ,{field:'seo_keyword', title:'seo关键字'}
                    ,{field:'thumbnail', title:'缩略图',templet:function(d){
                        return d.thumbnail ? `<img class="review" src="${d.thumbnail}" style="width: 100%;">` : '';
                    }}
                    ,{field:'date', title:'显示时间'}
                    ,{field:'views', title:'观看次数'}
                    ,{field: 'sort', title:'排序'}
                    ,{field: 'create_time', title:'创建时间'}
                    ,{field: 'lb', title:'类别'}
                    ,{field: 'zhiding', title:'置顶'}
                    ,{title:'操作', toolbar: '#barDemo',width:110}
                ]],miniTab = layui.miniTab
        table.render({
            elem:'#table',
            url:'/admin/article',
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            where:{column_id:column_id},
            cols,
            limit:15,
            page: true
        })
        //头部工具栏
        table.on('toolbar(table)',function(obj){
            let event = obj.event
            var checkStatus = table.checkStatus(obj.config.id);
            switch (event) {
                case 'print2':
                    $.get("/admin/articleAll",res=>{print(res,cols)})
                    break;
                case 'delALl':
                    var data = checkStatus.data;
                    data = data.map(item=>item.id)
                    layer.confirm("真的要删除选中的这"+data.length+'条文章吗?删除后将会进入文章回收站',function(index){
                        $.post('/admin/delArticle',{id:data},res=>{layer.msg(res.msg);table.reload('table');layer.close(index);})
                    })
                    break;
                case 'addOne':
                    miniTab.openNewTabByIframe({
                        href:"/admin/editArticle?column_id="+column_id,
                        title:"添加文章",
                    });
                    break;
                case 'search':
                    let search = $("input[name='search']").val(),date = $("input[name='date']").val().split('~').filter(item=>item)
                    table.render({
                        elem:'#table',
                        url:'/admin/article',
                        toolbar:'#toolbarDemo',
                        defaultToolbar: ['filter', 'exports', {
                            title:'打印',
                            layEvent: 'print2',
                            icon: 'layui-icon-print'
                        }],
                        where:{
                            column_id:column_id,
                            search:search ?? '',
                            date:date
                        },
                        cols,
                        limit:15,
                        page: true
                    })
            }
        })
        //单元格工具栏
        table.on('tool(table)',function(obj){
            switch (obj.event) {
                case 'edit':
                    miniTab.openNewTabByIframe({
                        href:"/admin/editArticle?id="+obj.data.id,
                        title:"编辑文章",
                    });
                    break;
                default:
                    layer.confirm('真的要删除这篇文章吗?删除后可以在文章回收站还原',function(index){
                        $.post('/admin/delArticle',{id:obj.data.id},res=>{table.reload('table');layer.close(index);layer.msg(res.msg)})
                    })
            }
        })
        function print (res,cols) {
            var v = document.createElement("div");
            var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join("");
            thead = `<h1 style="text-align: center;">这是标题</h1><table><thead><tr>`
            for(let v2 of cols[0]){
                if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                    thead += `<th class="layui-table-col-special">空列</th>`
                }else{
                    thead += `<th>${v2.title}</th>`
                }
            }
            thead += `</tr></thead></table>`
            $(v).append(thead);
            var tr = `<tbody>`
            for(let v of res){
                tr += '<tr>'
                for(let v2 of cols[0]){
                    if((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')){
                        tr += `<td class="layui-table-col-special"></td>`
                    }else{
                        var field = v2.field ?? 'id'
                        tr += `<td>${v[field]}</td>`
                    }
                }
                tr += '</tr></tbody>'
            }
            $(v).find('tr').after(tr)
            $(v).find("th.layui-table-patch").remove();
            $(v).find(".layui-table-col-special").remove();
            var h = window.open("打印窗口", "_blank");
            h.document.write(f + $(v).prop("outerHTML"));
            h.document.close();
            h.print();
            h.close();
        }
        $("body").on('click','.review',function(){
            layer.photos({
                photos: $(this).parent(),
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
        laydate.render({
            elem: '#test6',
            type: 'datetime',
            range: '~'
        });
    })
</script>
{/block}